<template>
    <div>
        <div id="title">
            <span class="fa fa-chevron-left" @click="back" id="back"></span>
            <span>商品列表</span>
            <span></span>
        </div>
        <div>
            <div id="bar">
                <div class="sorts">
                    <span @click="priceClick" 
                        :class="{redtext:selectItem==1}">价格</span><span class="fa fa-sort"></span>
                </div>
                <div class="sorts">
                    <span @click="numClick" 
                    :class="{redtext:selectItem==2}">销量</span><span class="fa fa-sort"></span>
                </div>
                <div class="fa fa-th-list changes" @touchstart="changeItem" v-if="listItem=='ItemH'"></div>
                <div class="fa fa-th-large changes" @touchstart="changeItem" v-else></div>
                <!--fa-th-large-->
                <div class="others">
                    <span @click="selectClick" 
                    :class="{redtext:selectItem==3}">筛选</span><span class="fa fa-filter"></span>
                </div>
                <transition name="select">
                <div id="selectbar" v-if="showbar">
                    <label for="">请输入价格区间：</label>
                    <br>
                    <input type="text" placeholder="最低价格" v-model="lowprice">-<input type="text" placeholder="最高价格" v-model="highprice">
                    <br>
                    <button @touchstart="selectbtn">提交</button>            
                </div>
                </transition>
            </div>
        </div>
        <component :is="listItem" :itemskindAll="itemskindAll"></component>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
import {Swiper} from 'vux';
import ItemV from '@/components/Listitem';
import ItemH from '@/components/ListitemH';
export default {
   data:function(){
        return {
            selectItem:1,
            asc:true,
            showbar:false,
            lowprice:"",
            highprice:""
        }
    },
    components:{
         ItemV,
         ItemH
    },
    methods:{
        back:function(){
            history.back();
        },
        selectClick:function(){
            this.selectItem=3;
            this.showbar=!this.showbar;
        },
         priceClick:function(){
            this.selectItem=1;
            this.asc = !this.asc;
            var params = {
                asc:this.isAsc,
                smallkind:this.$route.query.skind
            }
            this.$store.dispatch("requestItemskindAll",params)
        },
        numClick:function(){
            this.selectItem=2;
            var params = {
                smallkind:this.$route.query.skind,
                num:1
            }
            console.log(params)
            this.$store.dispatch("requestItemskindAll",params)
        },
       
       
        ...mapMutations({
                changeItem: "changeItem"
        }),
        select:function(){
            this.showbar = !this.showbar;

        },
        selectbtn:function(){
            this.showbar  =false;
            var params = {
                smallkind:this.$route.query.skind,
                lowprice:this.lowprice,
                highprice:this.highprice,
                select:1
            }
            this.$store.dispatch("requestItemskindAll",params)

        }
    },
    mounted:function(){
        var params = {
            smallkind:this.$route.query.skind
        };
        this.$store.commit("setItemskindAll","");
        setTimeout(()=> {
            this.$store.dispatch("requestItemskindAll",params);
        }, 1000);
    },
    computed:{
        isAsc:function(){
            if(this.selectItem==3&&!this.asc){
                return 1;
            }else if(this.selectItem==3&&this.asc){
                return 2;
            }else{
                return 0;
            }
        },
        skind:function(){
            return this.$route.query.skind;
        },
        bkind:function(){
            return this.$route.query.bkind;
        },
        ...mapState([
            "itemskindAll",
            "listItem"
        ])
    }
}
</script>

<style scoped>
#title{
    display:flex;
    justify-content:space-around;
    background-color:red;
    height:40px;
    line-height:40px;
}
#title span{
    color:white;
    font-size:18px;
}
#back{
    line-height:40px;
    color:white;
}
 #bar {
    display: flex;
    width: 100vw;
    height: 8vh;
    line-height: 5vh;
    padding: 2vh 0;
    border-bottom: 1px solid #ddd;
}

.sorts {
    width: 30vw;
    text-align: center;
}

.sorts span {
    font-size: 4.7vw;
}

.changes {
    width: 15vw;
    line-height: 5vh;
    text-align: center;
    border-right: 1px solid #ccc;
}

.others span {
    line-height: 5vh;
    text-align: center;
    padding-left: 8px;
    font-size: 5vw;
}
#selectbar{
    background-color: #e5e5e5;
    font-size:13px;
    width:150px;
    position:absolute;
    right:0;
    top:89px;
}
#selectbar input{
    width:60px;
}
#selectbar button{
    border:none;
    margin: 8px 0;
}
.select-enter {
    transform: translate(100%, 0);
}

.select-enter-active,
.select-leave-active {
    transition: all 0.7s;
}

.select-enter-to,
.select-leave {
    transform: translate(0, 0);
}

.select-leave-to {
    transform: translate(100%, 0);
}
</style>    